<template>
  <div id="app">
    <el-header>
      <h2 style="margin:0">
        北京市国土空间规划 “一张图” 实施监督信息系统
      </h2>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <p class="aside-title">指标模型管理</p>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          background-color="#C6E2FF"
          :default-active="activeIndex" 
          router
          @close="handleClose">
          <template >
                <el-submenu :index="menu.path" :key="menu.id" v-for="(menu) in menulist" :unique-opened="true">
                   <template slot="title">{{menu.title}}</template>
                      <!-- <el-menu-item :index="midx + '-' + sidx" :key="sidx"> -->
                      <el-menu-item :index="smenu.path" :key="smenu.id" v-for="(smenu) in menu.submenu">
                        {{smenu.title}}
                      </el-menu-item>
                </el-submenu>
                <!-- <i class="el-icon-location"></i> -->
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return {
      activeIndex:'/page2',
      menulist:[
        {
          id:0,
          title: '指标管理',
          path:'/',
          submenu: [
            {
              id:1,
              title: '指标中心',
              path: '/page1'
            },
            {
              id:2,
              title:'指标配置',
              path: '/page2'
            },
            {
              id:3,
              title:'指标方案管理',
              path: '/page3'
            }
          ]
        }
      ],
    }
  },
  methods: {
    handleOpen(){
      // alert('handleOpen')
    },
    handleClose(){
      // alert('handleClose')
    }
  }
}
</script>


<style lang="stylus">
html,body{width:100%;height:100%;margin:0;padding:0;color:#000;font-family: sans-serif;overflow: hidden;}
#app{width: 100%;height: 100%;}
ul, ol {list-style:none;margin:0;padding:0;}
div, p, dl, dt, dd {margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
a{text-decoration:none;}
#app
  .el-container
    height calc(100% - 60px)
  .el-header
    background #409EFF
    h2
      line-height 60px
      color #fff
  .el-aside
    height 100%
    background #C6E2FF
    .aside-title
      text-align center
      line-height 40px
      border-bottom 1px solid #A0CFFF
  .el-menu
    height calc(100% - 60px)
    border none
</style>
